<template>
	<section class="dealerRate wrapper">
		<ul class="showData">
			<li class="title">累计非授权经销商数量</li>
			<li class="number">{{showNumber.countDealerNum}}</li>
			<li class="title">平均非授权经销商数量</li>
			<li class="number">{{showNumber.averageDealerNum}}</li>
			<li class="title">平均非授权经销商比例</li>
			<li class="number">{{showNumber.averageDealerRate}}%</li>
		</ul>
		<div class="charts">
			<el-button type="text" class='button'>
				<div v-for="(items,index,key) in searchbtn" :key="index" class="item" :class="items.isactive?'active':''" @click="addClass(index)">{{items.name}}</div>
			</el-button>
			<highcharts :options="dealerRateCharts"></highcharts>
		</div>
	</section>
</template>

<script>
	import Vue from 'vue'
    import {mapGetters} from 'vuex'
    import {Button} from 'element-ui'
    import VueHighcharts from "vue-highcharts"
	import Highcharts from  "highcharts"
	import {dealerRateOptions} from '~/assets/js/option_dataCharts'
	
	Vue.use(VueHighcharts, { Highcharts })
	Vue.use(Button)

    export default {
      head(){
          return {
              title: "非授权经销商比例",
              meta: [
                  { hid: 'dealerRateadd', name: 'dealerRateadd', content: 'dealerRateadd'}
              ]
          }
      },
      data() {
      	return {
      		tabName: '非授权经销商比例图表',
      		showNumber:{
				countDealerNum:'4320',
				averageDealerNum:'685',
				averageDealerRate:'20'
			},
      		searchbtn:[{
			    	name:'本周',
			    	value:'0',
			    	isactive:true
			    },{
			    	name:'本月',
			    	value:'1',
			    	isactive:false
			}],
      		dealerRateCharts:dealerRateOptions
      	}
      },
      computed: {
          ...mapGetters({
              'pageTabsList': 'getPageTabsList'
          })
      },
      created () {
          //pageTab
          if(process.BROWSER_BUILD) {
              if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                  let arr = this.pageTabsList;
                  arr[arr.length-1].name = this.tabName;
                  this.$store.commit('PAGETABSLIST',{data:arr})
              }
          }
      },
      
      methods:{
      	addClass(index){//添加样式
      		this.searchbtn.forEach((n,i)=>{
                n.isactive = i == index?true:false
           });
      	}
      }
      
    }
	
</script>

<style lang="scss">
	.button{
		float: right;
	}
	.dealerRate{
		border: 1px solid #dfe6ec;
		overflow: hidden;
		.showData{
			width: 180px;
			float: left;
			list-style: none;
			padding: 20px;
			margin:0;
			.title{
				font-size: 12px;
				margin-bottom: 10px;
			}
			.number{
				margin-bottom: 60px;
				font-size: 26px;
			}
		}
		.charts{
			padding-left: 40px;
			border-left: 1px solid #dfe6ec;
			float: left;
			
			.item{
				font-size: 14px;
	            color: #333;
				float: left;
				margin-left: 20px;
			}
			.item.active {
                font-family: STHeitiSC-Light;
                color: #0686F9;
            }
			
		}
	}
</style>